<template>
  <div>
    <Header title="地市排行"></Header>
    <div class="page__main">
      <div class="page__scroller bg-white rank-page">
        <div class="water-mark-wrap">
          <div class="title-bg">
            {{showDate}}地市排行分析报告
            <button type="button" class="title-bg__btn" @click="tipDialog.show = true"></button>
          </div>
          <div class="page-title">
            <div class="page-title__time">
              <span @click="chooseDate">{{showDate}}</span>
            </div>
          </div>
          <div class="rank-type rank-type-business">业务描述</div>
          <div class="box">
            <div class="business-intro">
              <van-loading size="24px" vertical v-show="businessIntro.loading">数据加载中...</van-loading>
              <div
                class="business-intro__item"
                v-for="(item, index) in businessIntro.introList"
                :key="index"
                v-show="!businessIntro.loading"
                v-if="role == 'city' && item.id != '3' && item.id != '4'">
                <div class="business-intro__intro">{{item.intro}}</div>
                <div class="mgb-4"><span class="business-intro__num">{{item.value}}</span>{{item.unit}}</div>
                <div>
                  <span class="business-intro__label" :class="'text--' + item.color">{{item.rankCity}}</span>
                </div>
              </div>
              <div
                class="business-intro__item"
                v-for="(item, index) in businessIntro.introList"
                :key="index"
                v-show="!businessIntro.loading"
                v-if="role == 'all' || role == 'province'">
                <div class="business-intro__intro">{{item.intro}}</div>
                <div class="mgb-4"><span class="business-intro__num">{{item.value}}</span>{{item.unit}}</div>
                <div>
                  <span class="business-intro__label" :class="'text--' + item.color" v-show="role == 'all'">{{item.rank}}</span>
                  <span class="business-intro__label" :class="'text--' + item.color" v-show="role == 'province'">{{item.rankProvince}}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="box" v-show="role == 'city'">
            {{userArea}}位于全国综合规模排名第{{businessIntro.cityRank.ITEM1}}名，
            较上月名次变化<span class="trend" :class="'trend--' + businessIntro.cityRank.rankItem2">{{businessIntro.cityRank.ITEM2}}</span>名，
            省内排行第{{businessIntro.cityRank.ITEM3}}名，
            较上月名次变化<span class="trend" :class="'trend--' + businessIntro.cityRank.rankItem4">{{businessIntro.cityRank.ITEM4}}</span>名。
          </div>
          <div class="box mgb-15" v-show="role == 'all' || role == 'province'">
            <div class="box__head">
              <div class="box__head-left">
                <div class="box__head-title">{{userArea}}综合规模排名</div>
              </div>
            </div>
            <div class="table-wrap">
              <table class="table">
                <tr v-show="role == 'all'">
                  <th>省分</th>
                  <th>综合排名</th>
                  <th>一类<br>地市</th>
                  <th>二类<br>地市</th>
                  <th>三类<br>地市</th>
                  <th>四类<br>地市</th>
                </tr>
                <tr v-show="role == 'province'">
                  <th>地市</th>
                  <th>分类</th>
                  <th>综合排名</th>
                  <th>较上月<br>排名</th>
                </tr>
                <tr v-show="businessIntro.loading">
                  <td colspan="6" v-show="role == 'all'">
                    <van-loading size="24px" vertical>数据加载中...</van-loading>
                  </td>
                  <td colspan="4" v-show="role == 'province'">
                    <van-loading size="24px" vertical>数据加载中...</van-loading>
                  </td>
                </tr>
                <tr v-for="(item, index) in businessIntro.synthesisList.showList" v-show="role == 'all'">
                  <td>{{item.ITEM1}}</td>
                  <td>{{item.ITEM2}}</td>
                  <td>{{item.ITEM3}}</td>
                  <td>{{item.ITEM4}}</td>
                  <td>{{item.ITEM5}}</td>
                  <td>{{item.ITEM6}}</td>
                </tr>
                <tr v-for="(item, index) in businessIntro.synthesisList.showList" v-show="role == 'province'">
                  <td>{{item.ITEM1}}</td>
                  <td>{{item.ITEM3}}</td>
                  <td>{{item.ITEM2}}</td>
                  <td>
                    <span class="trend trend--asc" v-show="item.ITEM4 > 0">{{item.ITEM4}}</span>
                    <span class="trend" v-show="item.ITEM4 == 0">{{item.ITEM4}}</span>
                    <span class="trend trend--desc" v-show="item.ITEM4 < 0">{{Math.abs(item.ITEM4)}}</span>
                  </td>
                </tr>
              </table>
              <div class="show-more" @click="handleSynthesisListRank('synthesisListRank', businessIntro.synthesisList.showAll)" v-show="!businessIntro.loading">
                {{businessIntro.synthesisList.showAll == false ? '查看更多' : '折叠'}}
              </div>
            </div>
          </div>
          <div class="rank-type rank-type-develop">发展规模</div>
          <div class="box" v-show="role != 'city'">
            <div class="box__head">
              <div class="box__head-left">
                <div class="box__head-title">{{userArea}}分类排名</div>
              </div>
              <div class="box__head-right">
                <div class="tabs">
                  <span
                    class="tabs__item"
                    v-for="(item, index) in classifyRank.list"
                    :key="index"
                    :class="item.id == classifyRankActive ? 'tabs__item--current' : ''"
                    @click="handleChangeTab('classifyRankActive', item.id)"
                    >{{item.name}}</span>
                </div>
              </div>
            </div>
            <div class="box bg-gray radius--samll mgb-8">
              {{provinceRankDate.userArea}}塔类租户数合计{{numFormat(provinceRankDate.tenantCnt)}}个，较上月{{provinceRankDate.tennantCntCompLastMon}}，营业收入总额{{numFormat(provinceRankDate.incomeCnt)}}万元，较上月{{provinceRankDate.incomeCompLastMon}}。
            </div>
            <div :style="{height: provinceRankDate.showAll == false ? '195px' : 'auto', overflow: 'hidden'}" >
              <RankList :data="provinceRankDate.barData"></RankList>
              <van-loading size="24px" vertical v-show="provinceRankDate.loading">数据加载中...</van-loading>
            </div>
            <div class="show-more" @click="provinceRankDate.showAll = !provinceRankDate.showAll" v-show="provinceRankDate.showMore">
              {{provinceRankDate.showAll == false ? '查看更多' : '折叠'}}
            </div>
          </div>
          <div class="box">
            <div class="box__head">
              <div class="box__head-left">
                <div class="box__head-title">{{userArea}}塔类租户及营业收入变化趋势</div>
              </div>
              <div class="box__head-right" v-show="role != 'city'">
                <div class="selects-wrap">
                  <Choose class="select" :data="incomeTrendData.cityPicker" @getId="handleIncomeTrendCity"></Choose>
                </div>
              </div>
            </div>
            <div class="tabs">
              <span
                class="tabs__item"
                v-for="(item, index) in classifyRank.list"
                :key="index"
                :class="item.id == incomeTrendActive ? 'tabs__item--current' : ''"
                @click="handleChangeTab('incomeTrendActive', item.id)"
              >{{item.name}}</span>
            </div>
            <div style="height: 180px;">
              <LineChart :data="incomeTrendData.lineData"></LineChart>
            </div>
          </div>
          <div class="box mgb-15" v-show="role == 'all'">
            <div class="box__head">
              <div class="box__head-left">
                <div class="box__head-title">{{userArea}}地市分类排行TOP10</div>
              </div>
            </div>
            <div class="tabs mgb-15">
              <span
                class="tabs__item"
                v-for="(item, index) in classifyRank.list"
                :key="index"
                :class="item.id == topTenActive ? 'tabs__item--current' : ''"
                @click="handleChangeTab('topTenActive', item.id)"
              >{{item.name}}</span>
            </div>
            <div class="box bg-gray radius--samll">
              全国地市塔类租户数较上月环比增长最快的前三个地市为：{{topTenRankDate.cities}}；塔类租户数分别为：{{topTenRankDate.tenantNum}}；增速分别为：{{topTenRankDate.increaseRate}}。
            </div>
            <div :style="{height: topTenRankDate.showAll == false ? '195px' : 'auto', overflow: 'hidden'}">
              <RankList :data="topTenRankDate.barData"></RankList>
              <van-loading size="24px" vertical v-show="topTenRankDate.loading">数据加载中...</van-loading>
            </div>
            <div class="show-more" @click="topTenRankDate.showAll = !topTenRankDate.showAll" v-show="topTenRankDate.btnMoreShow">
              {{topTenRankDate.showAll == false ? '查看更多' : '折叠'}}
            </div>
          </div>
          <div class="rank-type rank-type-tenant" v-show="role != 'all'">租户分析</div>
          <div class="box" v-show="role != 'all'">
            <div class="box__head">
              <div class="box__head-left">
                <div class="box__head-title">{{userArea}}租户构成</div>
              </div>
            </div>
            <div class="table-wrap" v-show="role == 'province'">
              <table class="table">
                <tr>
                  <th>地市</th>
                  <th>塔类及微<br>站租户数</th>
                  <th>微站租<br>户数</th>
                  <th>室分租<br>户数</th>
                  <th>拓展业务<br>租户数</th>
                </tr>
                <tr v-show="tenantAnalyze.loading">
                  <td colspan="5">
                    <van-loading size="24px" vertical>数据加载中...</van-loading>
                  </td>
                </tr>
                <tr v-for="item in tenantAnalyze.showData">
                  <td>{{item.ITEM0}}</td>
                  <td>{{numFormat(item.ITEM1)}}</td>
                  <td>{{numFormat(item.ITEM2)}}</td>
                  <td>{{numFormat(item.ITEM3)}}</td>
                  <td>{{numFormat(item.ITEM4)}}</td>
                </tr>
              </table>
              <div class="show-more" @click="handleSynthesisListRank('tenantAnalyze', tenantAnalyze.showAll)" v-show="!tenantAnalyze.loading">
                {{tenantAnalyze.showAll == false ? '查看更多' : '折叠'}}
              </div>
            </div>
            <div class="table-wrap" v-show="role == 'city'">
              <table class="table">
                <tr>
                  <th>&emsp;</th>
                  <th>塔类及微站</th>
                  <th>微站</th>
                  <th>室分</th>
                  <th>拓展业务</th>
                </tr>
                <tr v-show="tenantAnalyze.loading">
                  <td colspan="5">
                    <van-loading size="24px" vertical>数据加载中...</van-loading>
                  </td>
                </tr>
                <tr v-for="item in tenantAnalyzeCity.data">
                  <td><span>{{item.ITEM0}}</span></td>
                  <td>{{item.ITEM1}}</td>
                  <td>{{item.ITEM2}}</td>
                  <td>{{item.ITEM3}}</td>
                  <td>{{item.ITEM4}}</td>
                </tr>
              </table>
            </div>
          </div>
          <div class="rank-type rank-type-income">收入分析</div>
          <div class="box">
            <div class="box__head">
              <div class="box__head-left">
                <div class="box__head-title">{{userArea}}营业收入分析</div>
              </div>
              <div class="box__head-right" v-show="role != 'city'">
                <div class="selects-wrap">
                  <Choose class="select" :data="incomeAnalyze.cityPicker" @getId="handleIncomeAnalyzeCity"></Choose>
                </div>
              </div>
            </div>
            <div style="height: 180px;">
              <PieChart :data="incomeAnalyze.pieData"></PieChart>
            </div>
          </div>
          <div class="box">
            <div class="box__head">
              <div class="box__head-left">
                <div class="box__head-title">{{userArea}}营业利润变化趋势</div>
              </div>
              <div class="box__head-right" v-show="role != 'city'">
                <div class="selects-wrap">
                  <Choose class="select" :data="profitData.cityPicker" @getId="handleProfitDataCity"></Choose>
                </div>
              </div>
            </div>
            <div class="tabs">
              <span
                class="tabs__item"
                v-for="(item, index) in incomeTrendList.list"
                :key="index"
                :class="item.id == profitActive ? 'tabs__item--current' : ''"
                @click="handleChangeTab('profitActive', item.id)"
              >{{item.name}}</span>
            </div>
            <div style="height: 180px;">
              <BarChart :data="profitData.barData"></BarChart>
            </div>
          </div>
          <div class="footer-tip">了解更多信息，请登录PC端运营数据展示系统</div>
          <WaterMark :length="13"></WaterMark>
        </div>
      </div>
    </div>
    <van-popup
      v-model="date.show"
      position="bottom"
      :style="{ height: '40%' }"
    >
      <van-datetime-picker
        v-model="date.currentDate"
        type="year-month"
        :min-date="date.minDate"
        :max-date="date.maxDate"
        :formatter="formatter"
        @cancel="handleCanleDate"
        @confirm="handleConfirmDate"
      ></van-datetime-picker>
    </van-popup>
    <div class="tip-dialog" v-show="tipDialog.show">
      <div class="tip-dialog__main">
        <div class="tip-dialog__header">
          指标说明
          <button type="button" class="tip-dialog__close" @click="tipDialog.show = false"></button>
        </div>
        <div class="tip-dialog__body">
          <div class="tip-dialog__list">
            <div class="tip-dialog__item" v-for="(item, index) in tipDialog.list" :key="index">
              <div class="tip-dialog__item-title">{{item.title}}</div>
              <div class="tip-dialog__item-intro" v-show="item.intro != undefined">{{item.intro}}</div>
              <div class="tip-dialog__item-detail" v-show="item.detail != undefined">{{item.detail}}</div>
            </div>
          </div>
          <div class="footer-tip">了解更多信息，请登录PC端运营数据展示系统</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import Header from '@/components/Header'
  import RankList from '@/components/RankList'
  import LineChart from '@/components/LineChart'
  import BarChart from '@/components/BarChart'
  import PieChart from '@/components/PieChart'
  import Choose from '@/components/Choose'
  import WaterMark from '@/components/WaterMark'
  
  export default {
    components:{
      Header,
      LineChart,
      BarChart,
      PieChart,
      Choose,
      RankList,
      WaterMark
    },
    data() {
      return {
        userInfo: this.$store.state.userInfo,
        role: sessionStorage.getItem('role'),
        userArea: '',
        showDate: '----年--月',
        selectDate: '',
        areaList: {
          list: [],
        },
        date: {
          show: false,
          currentDate: new Date(),
          minDate: new Date(),
          maxDate: new Date(),
        },
        businessIntro: {
          loading: false,
          introList: [
            {
              value: '--',
              unit: '万元',
              intro: '经营收入合计',
              rank: '全国省分',
              rankProvince: '全省综合',
              rankCity: '全市综合',
              color: 'blue',
              id: 1,
            },
            {
              value: '--',
              unit: '%',
              intro: '平均收入利润率',
              rank: '全国省分',
              rankProvince: '全省平均',
              rankCity: '全市平均',
              color: 'blue',
              id: 2,
            },
            {
              value: '--',
              unit: '%',
              intro: '收入利润率',
              rank: '最高省分-',
              rankProvince: '最高地市-',
              color: 'pink',
              id: 3,
            },
            {
              value: '--',
              unit: '%',
              intro: '收入利润率',
              rank: '最低省分-',
              rankProvince: '最低地市-',
              color: 'green',
              id: 4,
            },
            {
              value: '--',
              unit: '个',
              intro: '综评租户数合计',
              rank: '全国省分',
              rankProvince: '全省综合',
              rankCity: '全市综合',
              color: 'blue',
              id: 5,
            },
            {
              value: '--',
              unit: '万元',
              intro: '租户平均收入',
              rank: '全国宏站及微站',
              rankProvince: '全省宏站及微站',
              rankCity: '全市宏站及微站',
              color: 'orange',
              id: 6,
            },
          ],
          synthesisList: {
            showAll: false,
            showList: [],
            totalList: [],
          },
          cityRank: {
            ITEM1: '--',
            ITEM2: '--',
            ITEM3: '--',
            ITEM4: '--',
            rankItem2: '',
            rankItem4: '',
          }
        },
        classifyRankActive: '1',
        provinceRankDate: {
          showAll: false,
          loading: false,
          showMore: false,
          userArea: '',
          tenantCnt: '-',
          tennantCntCompLastMon: '-',
          incomeCnt: '-',
          incomeCompLastMon: '-',
          barData: {
            data: [],
            unit: '-',
            rank: 'asc',
            rankAction: false
          }
        },
        topTenActive: '1',
        topTenRankDate: {
          showAll: false,
          loading: false,
          btnMoreShow: false,
          cities: '-',
          tenantNum: '-',
          increaseRate: '-',
          incomeCompLastMon: '-',
          barData: {
            data: [],
            unit: '-',
            rank: 'asc',
            rankAction: false
          },
        },
        incomeTrendActive: '1',
        incomeTrendData: {
          cityPicker: {
            defaultIndex: 0,
            showArea: '',
            selectId: this.$store.state.userInfo.home_city,
            columns: []
          },
          lineData: {
            data: [],
            unit: '-',
          }
        },
        incomeAnalyze: {
          cityPicker: {
            defaultIndex: 0,
            showArea: '',
            selectId: this.$store.state.userInfo.home_city,
            columns: []
          },
          pieData: {
            data: [],
            unit: '万元'
          }
        },
        profitActive: '1',
        profitData: {
          cityPicker: {
            defaultIndex: 0,
            showArea: '',
            selectId: this.$store.state.userInfo.home_city,
            columns: []
          },
          barData: {
            data: [],
            unit: '-'
          }
        },
        classifyRank: {
          list: [
            {
              name: '塔类租户数',
              id: 1
            },
            {
              name: '营业收入',
              id: 2
            },
          ]
        },
        incomeTrendList: {
          list: [
            {
              name: '收入利润',
              id: 1
            },
            {
              name: '收入利润率',
              id: 2
            },
          ]
        },
        tenantAnalyze: {
          loading: false,
          showData: [],
          dataAll: [],
          showAll: false,
        },
        tenantAnalyzeCity: {
          data: []
        },
        tipDialog: {
          show: false,
          list: [
            {
              title: '收入利润率',
              intro: '收入利润率=利润总额/营业收入'
            },
            {
              title: '经营收入合计',
              detail: '指统计期内公司让渡资产使用权销售商品或提供劳务等取得的营业收入，包含塔类产品、室分产品、传输产品、服务产品及其他产品收入'
            },
            {
              title: '综评租户数合计',
              detail: '如果本省收入利润率大于等于全国省分平均收入利润率时，\n' +
                '综评租户数=(1+(本省收入利润率-全国省分收入利润率)/(最高省分收入利润率-全国省分平均收入利润率)×0.1)×(塔类及微站租户数+室分折合租户数+拓展业务折合租户数)\n' +
                '否则综评租户数=(0.9+(本省收入利润率-最低省分收入利润率)/(全国省分平均收入利润率-最低省分收入利润率)×0.1)×(塔类及微站租户数+室分折合租户数+拓展业务折合租户数)\n' +
                '室分折合租户数=(室分业务收入/全公司塔类及微站租户平均收入单价)×1\n' +
                '拓展业务折合租户数=(拓展业务收入/全公司塔类及微站租户平均收入单价)×1.5'
            },
            {
              title: '室分站址收入',
              detail: '指统计期内公司提供室分产品服务时，面向客户收取的费用'
            },
            {
              title: '拓展业务收入',
              detail: '指统计期内公司提供拓展业务产品服务时，面向客户收取的费用'
            },
            {
              title: '收入利润',
              intro: '收入利润=营业利润+营业外收入-营业外支出',
              detail: '指企业一定时期内通过生产经营活动所实现的最终财务成果'
            },
            {
              title: '塔类及微站收入',
              detail: '指统计期内公司提供塔类（含微站）产品服务时，面向客户收取的费用'
            }
          ]
        }
      }
    },
    methods: {
      //格式化时间
      formatter(type, value) {
        if (type === 'year') {
          return `${value}年`;
        } else if (type === 'month') {
          return `${value}月`
        }
        return value;
      },
      //取消日期设置
      handleCanleDate() {
        this.date.show = false
      },
      //显示日期弹框
      chooseDate() {
        this.date.show = true
      },
      handleConfirmDate(value) {
        this.handleCanleDate()
        let date = new Date(value)
        let year = date.getFullYear()
        let month = date.getMonth() + 1
        this.showDate = year + '年' + month + '月'
        this.selectDate = month < 10 ? year + '0' + month : year + '' + month
  
        this.initPage()
      },
      //显示全部全国各省综合规模排名
      handleSynthesisListRank(item, param) {
        if(item == 'synthesisListRank') {
          if (param == false) {
            let total = this.businessIntro.synthesisList.totalList.length
            this.businessIntro.synthesisList.showList = this.businessIntro.synthesisList.totalList.slice(0, total)
            this.businessIntro.synthesisList.showAll = true
          } else {
            this.businessIntro.synthesisList.showList = this.businessIntro.synthesisList.totalList.slice(0, 5)
            this.businessIntro.synthesisList.showAll = false
          }
        } else if (item == 'tenantAnalyze') {
          if (param == false) {
            let total = this.tenantAnalyze.dataAll.length
            this.tenantAnalyze.showData = this.tenantAnalyze.dataAll.slice(0, total)
            this.tenantAnalyze.showAll = true
          } else {
            this.tenantAnalyze.showData = this.tenantAnalyze.dataAll.slice(0, 5)
            this.tenantAnalyze.showAll = false
          }
        }
      },
      // tab切换
      handleChangeTab(itemActive, index) {
        if (itemActive == 'classifyRankActive') {
          if(this.classifyRankActive != index) {
            this.classifyRankActive = index
            this.getProvinceRank()
          }
        } else if (itemActive == 'topTenActive') {
          if(this.topTenActive != index) {
            this.topTenActive = index
            this.getTopTenRank()
          }
        } else if (itemActive == 'incomeTrendActive') {
          if(this.incomeTrendActive != index) {
            this.incomeTrendActive = index
            this.getIncomeTrend()
          }
        } else if (itemActive == 'profitActive') {
          if(this.profitActive != index) {
            this.profitActive = index
            this.geProfitTrend()
          }
        }
      },
      //获得业务概述
      getBusinessSummary() {
        this.businessIntro.loading = true
        this.businessIntro.synthesisList.showList = []
        this.businessIntro.synthesisList.totalList = []
        let params = {
          areaId: this.userInfo.home_city,
          statMonth: this.selectDate
        }
        this.$http.post('/api/classRankMoa/getYwGs', params).then(data => {
          let intro = data.kpiInfoList[0]
          for(let key in intro) {
            if (key == 'allAvgRate') {
              this.businessIntro.introList[1].value = intro[key]
            } else if (key == 'maxIncomeRate') {
              this.businessIntro.introList[2].value = intro[key]
              if (this.role == 'all') {
                this.businessIntro.introList[2].rank = '最高省分-' + intro['maxIncomeCity']
              } else if (this.role == 'province') {
                this.businessIntro.introList[2].rankProvince = '最高地市-' + intro['maxIncomeCity']
              }
            } else if (key == 'minIncomeRate') {
              this.businessIntro.introList[3].value = intro[key]
              if (this.role == 'all') {
                this.businessIntro.introList[3].rank = '最低省分-' + intro['minIncomeCity']
              } else if (this.role == 'province') {
                this.businessIntro.introList[3].rankProvince = '最低地市-' + intro['minIncomeCity']
              }
            } else if (key == 'allTenantIncome') {
              this.businessIntro.introList[5].value = intro[key]
            } else if (key == 'allProvTenentCnt') {
              this.businessIntro.introList[4].value = this.numFormat(intro[key])
            } else if (key == 'allTenentIncomeCnt') {
              this.businessIntro.introList[0].value = this.numFormat(intro[key])
            }
          }
          
          this.businessIntro.synthesisList.totalList = data.allRank.rows
          
          if(this.role == 'city') {
            if (data.allRank.rows.length > 0) {
              this.businessIntro.cityRank = data.allRank.rows[0]
              if (this.businessIntro.cityRank.ITEM2 > 0) {
                this.businessIntro.cityRank.rankItem2 = 'asc'
              }
              if (this.businessIntro.cityRank.ITEM2 < 0) {
                this.businessIntro.cityRank.rankItem2 = 'desc'
                this.businessIntro.cityRank.ITEM2 = Math.abs(this.businessIntro.cityRank.ITEM2)
              }
              if (this.businessIntro.cityRank.ITEM4 > 0) {
                this.businessIntro.cityRank.rankItem4 = 'asc'
              }
              if (this.businessIntro.cityRank.ITEM4 < 0) {
                this.businessIntro.cityRank.rankItem4 = 'desc'
                this.businessIntro.cityRank.ITEM2 = Math.abs(this.businessIntro.cityRank.ITEM2)
              }
            } else {
              this.businessIntro.cityRank = {
                ITEM1: '--',
                ITEM2: '--',
                ITEM3: '--',
                ITEM4: '--',
                rankItem2: '',
                rankItem4: '',
              }
            }
          }
          
          this.handleSynthesisListRank('synthesisListRank', true)
          this.businessIntro.loading = false
        })
      },
      //获得全国各省分类排名
      getProvinceRank() {
        let params = {
          areaId: this.userInfo.home_city,
          statMonth: this.selectDate,
          kpiType: this.classifyRankActive,
          type: '1'
        }
        this.provinceRankDate.loading = true
        this.provinceRankDate.barData.data = []
  
        if (this.classifyRankActive == '1') {
          this.provinceRankDate.barData.unit = '个'
        } else if (this.classifyRankActive == '2') {
          this.provinceRankDate.barData.unit = '万元'
        }
        
        this.$http.post('/api/classRankMoa/getClassRank', params).then(data => {
          let topTileList = data.topTileList[0]
          let fzProvRank = data.fzProvRank
          this.provinceRankDate.tenantCnt = topTileList.tenantCnt
          this.provinceRankDate.tennantCntCompLastMon = topTileList.tennantCntCompLastMon
          this.provinceRankDate.incomeCompLastMon = topTileList.incomeCompLastMon
          this.provinceRankDate.incomeCnt = topTileList.incomeCnt
          
          fzProvRank.forEach(item => {
            this.provinceRankDate.barData.data.push({
              name: item.COL1,
              value: item.COL2
            })
          })
          
          let len = this.provinceRankDate.barData.data.length
          if (len >= '6') {
            this.provinceRankDate.showMore = true
          }
          this.provinceRankDate.loading = false
        })
      },
      //全国地市排名top10
      getTopTenRank() {
        let params = {
          areaId: '100000',
          statMonth: this.selectDate,
          kpiType: this.topTenActive,
          type: '2'
        }
        this.topTenRankDate.loading = true
        this.topTenRankDate.barData.data = []
  
        if (this.topTenActive == '1') {
          this.topTenRankDate.barData.unit = '个'
        } else if (this.topTenActive == '2') {
          this.topTenRankDate.barData.unit = '万元'
        }
        
        this.$http.post('/api/classRankMoa/getClassRank', params).then(data => {
          let topTenTitle = data.topTenTitle
          let topTenRankList = data.topTenRankList
          
          this.topTenRankDate.cities = topTenTitle.map(item => {
            return item.ITEM0
          }).join('、')
  
          this.topTenRankDate.tenantNum = topTenTitle.map(item => {
            return this.numFormat(item.ITEM1) + '个'
          }).join('、')
          
          this.topTenRankDate.increaseRate = topTenTitle.map(item => {
            return item.ITEM2
          }).join('、')
          
          topTenRankList.forEach(item => {
            this.topTenRankDate.barData.data.push({
              name: item.COL1,
              value: item.COL2
            })
          })
          
          if(this.topTenRankDate.barData.data.length > 0) {
            this.topTenRankDate.btnMoreShow = true
          }
          this.topTenRankDate.loading = false
        })
      },
      //获得塔类租户及营业收入变化趋势
      getIncomeTrend() {
        let params = {
          areaId: this.incomeTrendData.cityPicker.selectId,
          statMonth: this.selectDate,
          type: '1'
        }
        this.incomeTrendData.lineData.data = []
        this.$http.post('/api/classRankMoa/getTrendChange', params).then(data => {
          if (this.incomeTrendActive == '1') {
            this.incomeTrendData.lineData.unit = '个'
            data.fzProvRankMap.forEach(item => {
              this.incomeTrendData.lineData.data.push({
                date: item.COL1,
                value: item.COL3
              })
            })
          } else if (this.incomeTrendActive == '2') {
            this.incomeTrendData.lineData.unit = '万元'
            data.fzProvRankMap.forEach(item => {
              this.incomeTrendData.lineData.data.push({
                date: item.COL1,
                value: item.COL2
              })
            })
          }
        })
      },
      //获得营业收入分析
      getIncomeAnalyze() {
        let params = {
          areaId: this.incomeAnalyze.cityPicker.selectId,
          statMonth: this.selectDate,
          type: '2'
        }
        this.incomeAnalyze.pieData.data = []
        this.$http.post('/api/classRankMoa/getTrendChange', params).then(data => {
          let list = data.srfxProvinceBarData[0]
          this.incomeAnalyze.pieData.data.push(
            {
              name: '室分',
              value: list.COL0,
              percentage: list.COL1
            },
            {
              name: '业务拓展',
              value: list.COL2,
              percentage: list.COL3
            },
            {
              name: '塔类及微站',
              value: list.COL4,
              percentage: list.COL5
            },
          )
        })
      },
      //获得营业利润变化趋势
      geProfitTrend() {
        let params = {
          areaId: this.profitData.cityPicker.selectId,
          statMonth: this.selectDate,
          type: '3'
        }
        
        this.profitData.barData.data = []
        this.$http.post('/api/classRankMoa/getTrendChange', params).then(data => {
          let list = data.srfxProvinceTrendData
          
          if (this.profitActive == '1') {
            list.forEach(item => {
              this.profitData.barData.data.push({
                date: item.COL1,
                value: item.COL2,
              })
              this.profitData.barData.unit = '万元'
            })
          } else if (this.profitActive == '2') {
            list.forEach(item => {
              this.profitData.barData.data.push({
                date: item.COL1,
                value: item.COL3,
              })
              this.profitData.barData.unit = '%'
            })
          }
        })
      },
      //获得租户构成
      getTenantAnalyze() {
        let params = {
          areaId: this.userInfo.home_city,
          statMonth: this.selectDate,
        }
        this.tenantAnalyze.loading = true
        this.tenantAnalyze.dataAll = []
        this.tenantAnalyze.showData = []
        this.tenantAnalyzeCity.data = []
        this.$http.post('/api/classRankMoa/queryzffxBarData', params).then(data => {
          if (this.role == 'province') {
            this.tenantAnalyze.dataAll = data
            this.handleSynthesisListRank('tenantAnalyze', true)
          } else if (this.role == 'city') {
            if (data.length > 0) {
              this.tenantAnalyzeCity.data.push(
                {
                  ITEM0: '占比',
                  ITEM1: data[0].ITEM1 + '%',
                  ITEM2: data[0].ITEM4 + '%',
                  ITEM3: data[0].ITEM7 + '%',
                  ITEM4: data[0].ITEM10 + '%',
                },
                {
                  ITEM0: '较上月',
                  ITEM1: data[0].ITEM2 + '%',
                  ITEM2: data[0].ITEM5 + '%',
                  ITEM3: data[0].ITEM8 + '%',
                  ITEM4: data[0].ITEM11 + '%',
                }
              )
            }
          }
          this.tenantAnalyze.loading = false
        })
      },
      //获得地市
      getCities() {
        let params = {
          areaId: this.userInfo.home_city,
          statMonth: this.selectDate,
        }
  
        this.incomeTrendData.cityPicker.columns = []
        this.incomeAnalyze.cityPicker.columns = []
        this.profitData.cityPicker.columns = []
        this.$http.post('/api/classRankMoa/getAreaList', params).then(data => {
          let list = data.areaList
          let userArea = data.userArea[0].userArea
          list.forEach(item => {
            this.incomeTrendData.cityPicker.columns.push({
              text: item.area,
              id: item.areaId
            })
          })
          this.incomeTrendData.cityPicker.columns.unshift({text: data.userArea[0].userArea, id: this.userInfo.home_city})
          this.incomeTrendData.cityPicker.showArea = userArea
          this.incomeAnalyze.cityPicker.showArea = userArea
          this.profitData.cityPicker.showArea = userArea
          
          if (this.role == 'all') {
            this.userArea = userArea + '各省'
          } else if (this.role == 'province') {
            this.userArea = userArea + '地市'
          } else {
            this.userArea = userArea
          }
          this.provinceRankDate.userArea = userArea
        })
  
        this.incomeAnalyze.cityPicker.columns = this.profitData.cityPicker.columns = this.incomeTrendData.cityPicker.columns
      },
      //切换城市
      handleIncomeTrendCity(id) {
        if(this.incomeTrendData.cityPicker.selectId != id) {
          this.incomeTrendData.cityPicker.selectId = id
          this.getIncomeTrend()
        }
      },
      handleIncomeAnalyzeCity(id) {
        if(this.incomeAnalyze.cityPicker.selectId != id) {
          this.incomeAnalyze.cityPicker.selectId = id
          this.getIncomeAnalyze()
        }
      },
      handleProfitDataCity(id) {
        if(this.profitData.cityPicker.selectId != id) {
          this.profitData.cityPicker.selectId = id
          this.geProfitTrend()
        }
      },
      //获得时间域
      getMaxMinMonth() {
        function dateSplit(param) {
          let paramStr = param + ''
          let dateArr = paramStr.replace(/(.{4})/g,'$1,').split(',')
          return dateArr
        }
        return new Promise((resolve, reject) => {
          this.$http.post('/api/yearCheckIndex/maxMonth', {type: '2'}).then(data => {
            let max = data.maps[0].MAX_MONTH
            let min = data.maps[0].MIN_MONTH
    
            let maxYear = dateSplit(max)[0]
            let maxMonth = dateSplit(max)[1]
            let minYear = dateSplit(min)[0]
            let minMonth = dateSplit(min)[1]
            let actualMaxMonth = parseInt(maxMonth) - 1
            let actualMinMonth = parseInt(minMonth) - 1
            let showMaxMonth = maxMonth[0] == '0' ? maxMonth[1] : maxMonth
  
            this.date.currentDate = new Date(maxYear, actualMaxMonth)
            this.date.minDate = new Date(minYear, actualMinMonth)
            this.date.maxDate = new Date(maxYear, actualMaxMonth)
    
            this.showDate = maxYear + '年' + showMaxMonth + '月'
            this.selectDate = maxYear + '' + maxMonth
    
            resolve("ok")
          })
        })
      },
      //数字初始化
      numFormat(num) {
        return (num+ '').replace(/(\d{1,3})(?=(\d{3})+(?:$|\.))/g,'$1,')
      },
      //记录日志
      recordLogs() {
        let params = {
          userId: this.userInfo.user_id,
          verify_code: this.userInfo.verify_code,
          priv_id: '10100748',
        }
    
        this.$http.post("api/new/insertLogs", params).then(res => {})
      },
      //初始化页面
      initPage () {
        this.getCities()
        this.getBusinessSummary()
        if (this.role == 'all' || this.role == 'province') {
          this.getProvinceRank()
        }
        this.getIncomeTrend()
        this.getIncomeAnalyze()
        this.geProfitTrend()
        if (this.role == 'all') {
          this.getTopTenRank()
        }
        if (this.role == 'province' || this.role == 'city') {
          this.getTenantAnalyze()
        }
      }
    },
    created() {
      this.recordLogs()
      this.getMaxMinMonth().then(res => {
        if (res == 'ok') {
          this.initPage()
        }
      })
    },
  }
</script>

<style lang="scss" scoped>
  .rank-type {
    font-size: 18px;
    padding: 0 12px;
    
    &::before {
      content: "";
      display: inline-block;
      width: 1.5em;
      height: 1.5em;
      vertical-align: top;
      margin-right: 6px;
      background-size: 65% 65%;
      background-position: center center;
      background-repeat: no-repeat;
    }
  }
  
  .business-intro {
    box-shadow: 0 0 6px 3px rgba(226, 226, 226, .45);
    border-radius: 2px;
    overflow: hidden;
    padding: 0 16px;
    
    &__item {
      float: left;
      width: 50%;
      box-sizing: border-box;
      border-top: 1px solid #e5e5e5;
      margin-top: -2px;
      padding: 16px 0;
      text-align: center;
      
      &:nth-child(2n + 1) {
        padding-left: 26px;
        position: relative;
        
        &::before {
          content: "";
          position: absolute;
          border-left: 1px solid #e5e5e5;
          top: 25px;
          bottom: 20px;
          left: 0;
        }
      }
    }
    
    &__num {
      font-size: 16px;
    }
    
    &__intro {
      font-size: 14px;
    }
    
    &__label {
      display: inline-block;
      border: 1px solid;
      padding: 0 6px;
      border-radius: 2px;
    }
  }
  
  .table-wrap {
    box-shadow: 0 0 6px 3px rgba(226, 226, 226, .45);
    border-radius: 2px;
    overflow: hidden;
  }
  
  .tabs {
    
    &__item {
      display: inline-block;
      padding: 0 6px;
      border: 1px solid #ccc;
      line-height: 26px;
      border-radius: 13px;
      
      & + .tabs__item {
        margin-left: 6px;
      }
      
      &--current {
        color: #ff4b47;
        background: #fff6f6;
        border-color: #ff4b47;
      }
    }
  }
  .selects-wrap {
    border: 1px solid #e7e7e7;
    position: relative;
    border-radius: 2px;
  
    .select {
      padding: 4px 26px 4px 10px;
    }
  
    &::after {
      content: "";
      position: absolute;
      width: 5px;
      height: 5px;
      border-right: 1px solid #929292;
      border-bottom: 1px solid #929292;
      right: 6px;
      top: 50%;
      transform: translateY(-70%) rotate(45deg);
      background: #fff;
      pointer-events: none;
    }
  }
  @each $icon in business, develop, income, tenant {
    .rank-type-#{$icon}::before {
      background-image: url(~@/assets/images/icon-#{$icon}.png);
    }
  }
  .page-title__time {
    span {
      width:35%;
      display: inline-block;
      border: 1px solid #E5E5E5;
      padding: 4px 0px 4px 16px;
      color: #333;
      border-radius: 2px;
      position: relative;
      font-size:12px;
      
      &::after {
        content: "";
        position: absolute;
        width: 7px;
        height: 7px;
        border-right: 1px solid #929292;
        border-bottom: 1px solid #929292;
        right: 16px;
        top: 50%;
        transform: translateY(-70%) rotate(45deg);
        background: #fff;
      }
    }
  }
  /deep/
  .rank-page {
    .rank__head {
      margin-bottom: 8px;
    }
    .rank__item {
      margin-bottom: 12px;
    }
  }
</style>
